<template>
	<view class="select-box">
		<popupBox ref="selectCity" type="bottom" :isSlot="true">
			<view class="select-city-box">
				<view class="title">
					<text>请选择省市区</text>
					<image :src="$img_path('/mall/15.png')" @click="close" mode="widthFix"></image>
				</view>
				
				<view class="s-value">
					<view class="province" @click="check(0)">
						{{province ? province.text : '选择省份'}}
					</view>
					<view class="city" v-if="province" @click="check(1)">
						{{city ? city.text : '请选择'}}
					</view>
					<view class="arae" v-if="city" @click="check(2)">
						{{arae ? arae.text : '请选择'}}
					</view>
				</view>
				<view class="s-list">
					<view class="s-item">
						<text>A</text>
						<view class="name">
							安徽省
						</view>
					</view>
					<view class="s-item">
						<text>B</text>
						<view class="name" v-for="item in 4" @click="selectChange()">
							北京
						</view>
					</view>
				</view>
				<view class="s-btn">
					<button>确定</button>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup.vue'
	export default {
		name:'selectCity',
		components:{
			popupBox
		},
		data(){
			return {
				select_city_index:0,
				province:null,
				city:null,
				arae:null,
			}
		},
		methods:{
			selectChange(){
				if(this.select_city_index==0){
					this.province = {
						text:'北京',
						value:1
					}
					this.select_city_index=1
					this.city = null
					this.arae = null
				}else if(this.select_city_index==1){
					this.city = {
						text:'北京',
						value:2
					}
					this.select_city_index=2
					this.arae = null
				}else{
					this.arae = {
						text:'北京',
						value:2
					}
				}
			},
			check(type){
				this.select_city_index=type
			},
			open(){
				this.$refs.selectCity.open()
			},
			close(){
				this.$refs.selectCity.close()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.select-city-box{
		.title{
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			padding-top: 28rpx;
			text{
				font-weight: bold;
				font-size: 36rpx;
				color: #333333;
				line-height: 50rpx;
			}
			image{
				position: absolute;
				top: 32rpx;
				right: 22rpx;
				width: 41rpx;
				height: 41rpx;
			}
		}
		.s-value{
			padding: 66rpx 22rpx 32rpx;
			box-sizing: border-box;
			display: flex;
			&>view{
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
				&:not(:first-child){
					margin-left: 120rpx;
				}
			}
		}
		.s-list{
			width: 100%;
			height: 582rpx;
			overflow-y: auto;
			padding: 0 22rpx 50rpx;
			box-sizing: border-box;
			.s-item{
				width: 100%;
				padding-left: 30rpx;
				box-sizing: border-box;
				position: relative;
				&>text{
					position: absolute;
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					left: 0;
					top: 0;
				}
				.name{
					font-weight: 500;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					margin-bottom: 48rpx;
				}
			}
		}
		.s-btn{
			width: 100%;
			padding: 10rpx 22rpx 0;
			box-sizing: border-box;
			button{
				width: 100%;
				height: 96rpx;
				background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
				border-radius: 80rpx;
				font-weight: bold;
				font-size: 36rpx;
				color: #FFFFFF;
				line-height: 96rpx;
			}
		}
	}
</style>